<template>
    <div class="hand" >
        <div class="flex-box" style="height:100% ;">
            <div class="hand-left flex-box">
                <el-icon size="25" class="icon" @click="conststore.getisCollapse(conststore)"><Fold /></el-icon>
            </div>
            <ul class="flex-box" style="height: 100%;">
                <li v-for="(item,index) in selectmenu" :key="item.path" class="tab flex-box" :class="{ selected:router.path== item.meta.path}">
                    <el-icon size="20" class="icon"><component :is="item.meta.icon"></component></el-icon>
                    <router-link class="text" :to="{path:item.meta.path}">
                        {{ item.meta.name }}
                    </router-link>
                    <el-icon size="20" class="icon" @click="close(conststore,item)"><Close/></el-icon>
                </li>
            </ul>
        </div>
        <div class="hand-right">
            <el-dropdown @command="handleClick">
                <div class="el-dropdown-link flex-box">
                    <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <p class="user-name">hhhh</p>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                     <el-dropdown-item command="cancel">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    
</template>

<script setup name="navhander" lang="ts">
import useCountStore from '@/medical/m-store/stroe';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const conststore=useCountStore()
let {selectmenu} =storeToRefs(conststore)
const router=useRoute()
const router2=useRouter()
function close(conststore,item){
    //获取当前按钮的索引
   const index=conststore.deleteSelectmenu(conststore,item)
    
    if(router.path==item.meta.path){
        if(index==selectmenu.value.length){
             if(index==0){
                 router2.push('/dashboard')
             }else{
                 router2.push(selectmenu.value[selectmenu.value.length-1].meta.path)
             }
         }else{
            router2.push(selectmenu.value[index].meta.path)
         }
    }
}

function handleClick(command:string){
    if(command=='cancel'){
        localStorage.removeItem('pz_token')
        localStorage.removeItem('pz_userInfo')

        window.location.href= window.localStorage.origh
    }
}


</script>

<style scoped >
.hand {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    align-items: center;
}
.hand-left{
    padding-left: 20px;
    width: 50px;
    height: 100%;
    background-color: #fff;
}
   .text{ 
    margin: 0px 10px;
}
    
a{
    color:black;
    text-decoration: none; 
}
.selected a{
        color: #409eff;
        
}
.selected i{
        color: #409eff;
}
.selected{
    background-color: #f5f5f5;
}
.hand-right{
    height: 100%;
}
.flex-box{
    display: flex;
    align-items: center;
}
.tab{
    margin:0px 5px; 
    height: 100%;
}
.tab:hover{
    background-color: #e4e4e4;
}
.user-name{
    margin-left: 15px;
}
.hand-left:hover{
    background-color :#f5f5f5;
    transition: 0.5s;
    cursor: pointer;
}
</style>